<template>
	<view class="content">
		<u-search style="margin: 10rpx 20rpx;" placeholder="请输入关键字" v-model="keyword"></u-search>
		<view class="wrap">
			<u-swiper :list="list"></u-swiper>
		</view>
		<view class="grid-wrap">
			<u-grid :col="5">
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">图片</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">锁头</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">图片</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">锁头</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="photo" :size="46"></u-icon>
					<view class="grid-text">图片</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="lock" :size="46"></u-icon>
					<view class="grid-text">锁头</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
				<u-grid-item>
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">沙漏</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="goods-list uni-flex">
			<view v-for="(item,index) in 10" :key="index" class="item">
				<image src="http://img13.360buyimg.com/n7/jfs/t1/179885/20/6852/356098/60b5908aE0a14f3b1/271b5f374dcaad83.jpg" mode="widthFix"></image>
				<view class="goods-name">艾戈勒(agelocer)陀飞轮系列手表男时尚镂空机械表 全景背透七彩真飞行陀飞轮轻</view>
				<view class="goods-price">￥14699.00</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: null,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 20rpx;
	}
	.goods-list {
		flex-wrap: wrap;
		
		.item {
			width: 50%;
			padding: 20rpx;
			box-shadow: 0 0 2rpx #eee;
			text-align: center;
			
			&:active {
				box-shadow: 0 0 10rpx #ccc;
			}
			
			image {
				width: 90%;
				height: 360rpx;
			}
			
			.goods-name{
				font-size: 30rpx;
				font-weight: bold;
			}
			.goods-price { 
				color: #d81e06;
				font-weight: bold;
			}
		}
	}
</style>
